<template>
	<view class="page">
		<view class="fiexd-nav">
			<uni-nav-bar statusBar @clickLeft="back" left-icon="left" :backgroundColor="backgroundColor" :title="hotelData.hotelName"
				:color="colorNav"></uni-nav-bar>
		</view>
		<scroll-view scroll-y style="height: 100vh;padding-bottom: 100rpx;" @scroll="scrollView">
			<view class="hotel-content">
				<view class="hotel-img">
					<image
						src="https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1702054800&t=b6fb1d9798a0d768acebdfd727780ea1"
						mode=""></image>
						
				</view>
				<view class="check-in-time">
					<view class="left-content">
						<view class="days">{{startdate}}<text></text></view>
						<view class="days">{{enddate}}<text></text></view>
						<view class="all-day-num">共{{days}}晚</view>
					</view>
					<view class="lines"></view>
					<view class="right-content">
						<view class="equipments">
							<view>{{roomData.breakfast}}</view>
							<view class="lines"></view>
							<view>{{hotelData.bedType}}</view>
							<view class="lines"></view>
							<view>可住{{hotelData.capacity}}人</view>
							<view class="lines"></view>
							<view>{{hotelData.windowType}}</view>
						</view>
						<view class="equipments else-equipment" v-if="hotelData.useableArea != '㎡'">
							<view>{{hotelData.useableArea}}
							</view>

							<!-- <view class="lines"></view>
							<view>大床</view> -->
						</view>
					</view>
				</view>
				<view class="notice-content">
					<view class="left-notic">
						<view style="margin-bottom: 20rpx;">
							<view class="dot"></view>仅接待大陆客人
						</view>
						<view>
							<view class="dot"></view>无自2020年5月1日起，北京星级酒店不...
						</view>
					</view>
					<view @click="toread" class="room-reservation-notice">订房必读</view>
				</view>
			</view>
			<view class="box-content">
				<view class="inner-hotel-content">
					<view class="shaoxuan-hotel">
						<view class="room-reservation-notice-text">
							<view>入住信息</view>
							<view class="hint-text">姓名需与证件一致，只需填{{nums}}个入住人</view>
						</view>
						<view class="filter-item">
							<view class="filter-item-title">
								房间数
							</view>
							<uni-number-box :min="1" v-model="nums" @change="numChange"></uni-number-box>
						</view>
						<view class="filter-item" v-for="(item,index) in nums" :key="index">
							<view class="filter-item-title">
								入住人
							</view>
							<u-input placeholder="请填写姓名" v-model="names[index]" clearable></u-input>
							<!-- <input type="text" v-model="names[index]" placeholder="请填写姓名" placeholder-class="input-place-style" /> -->
						</view>
						<view class="filter-item">
							<view class="filter-item-title">
								手机号
							</view>
							<input type="number" placeholder="请填写手机号" v-model="phone"
								placeholder-class="input-place-style" />
						</view>
						<view class="filter-item" style="border: 0;">
							<view class="filter-item-title">
								到店时间
							</view>
							<view class="room-time">
								12点以后办理入住
								<!-- <picker mode="time" :value="time" start="14:00" end="18:00" @change="bindTimeChange">
										<view class="uni-input">最晚{{time}}到店</view>
									</picker> -->
							</view>

						</view>

					</view>

				</view>
				<view class="inner-hotel-content" style="margin-top: 30rpx;">
					<view class="shaoxuan-hotel">
						<view class="room-reservation-notice-text">
							<view>更多服务</view>
						</view>
						<view class="filter-item" style="border: 0;">
							<view class="filter-item-title">
								发票/报销
							</view>
							<view class="item-hint">酒店前台索取（无专票）</view>
							<image class="phone" @click="callphone"
								src="https://qiniu-cdn.maeiyun.com/imgs/hotel/phone.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="agreement-lines-content">
					<label class="agreement-lines">
						<radio @click="isagre = !isagre" :checked="isagre" style="transform:scale(0.7)"
							color="#EF5233" />
						<view class="agreement">请仔细<text @click="toread">订房须知</text />点击去支付即代表您已阅读并同意条款内容。</view>
					</label>
				</view>
			</view>
		</scroll-view>

		<view class="pay-content">
			<view class="left-price">
				<text>￥</text>{{allPrice}}
			</view>
			<view class="mingxi-text" @click="isShow = !isShow">
				<text>明细</text>
				<uni-icons v-if="isShow" type="down" size="14"></uni-icons>
				<uni-icons v-else type="top" size="14"></uni-icons>
			</view>
			<button class="pay-btn" @click="creartOrder">
				去支付
			</button>
		</view>
		<!-- 明细弹窗 -->
		<u-popup mode="bottom" border-radius="20" v-model="isShow" safe-area-inset-bottom mask-close-able closeable>
			<view class="popup-content">
				<view class="title-popup">
					<view>费用明细</view>
				</view>
				<view class="time-price-content">
					<view class="time-lines" v-for="(item,index) in roomData.array_price" :key="index">
						{{item.day}} 无早餐
						<view>{{nums}}间 x ¥ {{item.day_price}}</view>
					</view>
					<view class="all-day">
						{{startdate}} 入店 — {{enddate}} 离店
						<view>{{days}}晚</view>
					</view>
					<view class="shi-price">
						<view>实付</view>
						<view class="price-text">￥{{allPrice}}</view>
					</view>
				</view>
				<view class="pay-content">
					<view class="left-price">
						<text>￥</text>{{allPrice}}
					</view>
					<view class="mingxi-text" @click="isShow = !isShow">
						<text>明细</text>
						<uni-icons v-if="isShow" type="down" size="14"></uni-icons>
						<uni-icons v-else type="top" size="14"></uni-icons>
					</view>
					<button class="pay-btn" @click="creartOrder">
						去支付
					</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import publicData from './public/public.js'
	import bigNumber from '@/common/js/bignumber.js'
	import uInput from '@/uview-ui/components/u-input/u-input.vue'
	export default {
		components: {
			uInput
		},
		data() {
			return {
				showCaledar: false,
				type: 0,
				startdate: "",
				enddate: "",
				isagre: false, //协议选中状态
				days: 1,
				roomData: {},
				hotelData: {},
				nums: 1,
				names: [],
				phone: "",
				allPrice: 0,
				time: "14:00",
				isShow: false,
				backgroundColor:'rgba(0,0,0,0)',
				colorNav:'#fff'
			}
		},
		onLoad() {
			this.startdate = publicData.screeningCondition.checkInDate
			this.enddate = publicData.screeningCondition.checkOutDate
			this.days = publicData.screeningCondition.days
			this.roomData = publicData.selectRoom
			this.hotelData = publicData.selectHotel
			this.allPrice = this.roomData.price
			this.getBanner()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			scrollView(e){
				if(e.detail.scrollTop >2){
					this.backgroundColor = "#fff"
					this.colorNav = "#000"
				}else{
					this.backgroundColor = "rgba(0,0,0,0)"
					this.colorNav = "#fff"
				}
			},
			numChange(nums) {
				var allPrice = new bigNumber(nums).times(new bigNumber(this.roomData.price))
				this.allPrice = Number(allPrice).toFixed(2)
			},
			bindTimeChange: function(e) {
				this.time = e.detail.value
			},
			toread() {
				uni.navigateTo({
					url: '/otherpages/agreement/roomReservation'
				})
			},
			getBanner() {
				var that = this
				this.request.httpTokenRequest({
					url: "index/getBanner",
					method: "get"
				}).then(function(res) {
					if (res.code == 0) {
						that.bannerDate = res.data
					} else {}
				})
			},
			changeDays(data) {

			},
			toSearchList() {
				uni.navigateTo({
					url: '/otherpages/hotel/hotelList'
				})
			},
			// callphone() {
			// 	this.$util.makeCall(this.hotelData.phone)
			// },
			callphone(){
				var that = this
				uni.showActionSheet({
					itemList: [...this.hotelData.phone],
					success: function (res) {
						uni.setClipboardData({
							data: that.hotelData.phone[res.tapIndex],
							success: function () {
								that.$util.msg("复制成功")
							}
						});
					},
					fail: function (res) {
						// console.log(res.errMsg);
					}
				});
			},
			creartOrder() {
				if(!this.isagre){
					this.$util.msg('请勾选订房须知')
					return
				}
				if (this.names.length != this.nums) {
					this.$util.msg('请填写完整入住人姓名')
					return
				}
				if (!this.$util.phoneVerify(this.phone)) {
					return
				}
				this.request.httpTokenRequest({
					url: "order/createHotelOrder",
					method: 'post'
				}, {
					hotelID: this.hotelData.hotelID,
					checkInDate: this.startdate,
					checkOutDate: this.enddate,
					ratePlanID: this.roomData.ratePlanId,
					rate_plan_name: this.roomData.ratePlanName,
					roomId: this.hotelData.roomId,
					roomName: this.hotelData.roomName,
					arriveTime: '',
					contactName: this.names[0],
					contactMobile: this.phone,
					price: this.allPrice,
					roomNum: this.nums,
					guestNames: this.zhuanname,
					hotelName: this.hotelData.hotelName,
					hotel_image: this.hotelData.mainImage,
					room_image: this.hotelData.pictures.length > 0 ? this.hotelData.pictures[0].path : ''
				}).then(res => {
					if (res.code == 0) {
						uni.navigateTo({
							url: '/otherpages/pay/pay?order_id=' + res.data.order_id
						})
					} else {
						this.$util.msg(res.msg)
					}

				}, error => {

				})
			}
		},
		computed: {
			zhuanname() {
				var names = []
				this.names.map(item => {
					var obj = {
						'name': item
					}
					names.push(obj)
				})
				return JSON.stringify(names)
			}
		}
	}
</script>

<style lang="scss">
	.page {
		background: #F5F7F8;
		overflow-y: scroll;
	}

	.fiexd-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}

	.hotel-content {
		position: relative;
	}

	.hotel-img {
		width: 100%;
		height: 433rpx;
		overflow: hidden;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		position: relative; /* 设置容器相对定位 */
		image {
			width: 100%;
			height: 100%;
		}
	}
	.hotel-img::after{
		content: ""; /* 必须有内容才能生成伪元素 */
		position: absolute; /* 设置伪元素绝对定位于容器上方 */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4); /* 设置蒙层颜色及不透明度 */
		z-index: 0; /* 确保蒙层处于图像之上 */
	}

	//
	.check-in-time {
		display: flex;
		align-items: center;
		padding: 22rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: absolute;
		bottom: 102rpx;
		left: 30rpx;
		right: 30rpx;
		z-index: 9;
		.left-content {
			.days {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #151515;

				text {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #101010;
				}
			}

			.all-day-num {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #606162;
			}
		}

		.lines {
			width: 1rpx;
			height: 108rpx;
			border: 1rpx solid #E2E2E2;
			margin: 0 23rpx 0 57rpx;
		}

		.right-content {
			.equipments {
				display: flex;
				align-items: center;

				view {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #62626B;
					line-height: 33rpx;
				}

				.lines {
					width: 1rpx;
					height: 21rpx;
					border: 1rpx solid #E2E2E2;
					margin: 0 10rpx;
				}
			}
		}
	}

	//
	.notice-content {
		display: flex;
		align-items: center;
		padding: 22rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: absolute;
		bottom: -68rpx;
		left: 30rpx;
		right: 30rpx;

		.left-notic {
			font-size: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #606162;

			view {
				display: flex;
				align-items: center;
			}

			.dot {
				width: 10rpx;
				height: 10rpx;
				background: #C1C1C1;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}

		.room-reservation-notice {
			font-size: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #049FB5;
			margin-left: auto;
		}
	}

	//
	.inner-hotel-content {
		box-sizing: border-box;
		padding: 27rpx 33rpx;
		margin-top: 98rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		.hotel-type {
			display: flex;
			align-items: flex-end;
			justify-content: space-around;

			.item-type {
				width: 100rpx;
				height: 51rpx;
				line-height: 51rpx;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
				text-align: center;

				.type-name {
					position: relative;
					z-index: 10;
				}

				.select-style {
					font-size: 34rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #EF5233;
				}

				.bottom-lines {
					width: 100rpx;
					height: 20rpx;
					background: #F3C4BB;
					border-radius: 14rpx;
					position: relative;
					top: -16rpx;
				}
			}
		}

		//
		.shaoxuan-hotel {
			margin-top: 8rpx;

			.room-reservation-notice-text {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: bold;
				color: #000000;
				margin: 30rpx 0;

				.hint-text {
					font-size: 22rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #62626B;
					margin-left: 7rpx;
				}
			}

			.filter-item {
				display: flex;
				align-items: center;
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1rpx solid #DADBDB;

				.filter-item-title {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #5E5F5F;
					width: 170rpx;
					text-align: left;
				}

				.input-place-style {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #8F8F91;
				}

				.item-hint {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #363737;
				}

				.phone {
					width: 37rpx;
					height: 36rpx;
					margin-left: auto;
				}

				.room-time {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}
		}


	}

	.agreement-lines-content {
		padding: 28rpx 0;
	}
	.agreement-lines {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.agreement {
			flex: 0 0 auto;
			font-size: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #616262;
			margin-left: 10rpx;
			text {
				color: #049FB5;
			}
		}
	}

	//
	.pay-content {
		height: 128rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;

		.left-price {
			font-size: 64rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: bold;
			color: #EF5233;

			text {
				font-size: 28rpx;
				font-weight: normal;
			}
		}

		button {
			margin: 0;
			padding: 0;
		}

		.mingxi-text {
			display: flex;
			align-items: center;
			color: #000000;
			font-size: $uni-font-size-base;
			margin-left: auto;
			margin-right: 10rpx;

			text {
				margin-right: 10rpx;
			}
		}

		.pay-btn {
			width: 266rpx;
			height: 87rpx;
			background: #EF5233;
			border-radius: 44rpx;
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 87rpx;
		}
	}

	// 弹窗
	.popup-content {
		padding: 30rpx;
		padding-bottom: 157rpx;
		background-color: #F7F8F9;

		.title-popup {
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 45rpx;
			margin-bottom: 32rpx;
		}

		.time-price-content {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
			padding-bottom: 0;

			.time-lines {
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
			}

			.all-day {
				height: 90rpx;
				line-height: 90rpx;
				border-top: 1rpx dashed #CFCFD1;
				border-bottom: 1rpx dashed #CFCFD1;
				margin-top: 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.shi-price {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				padding: 30rpx 0;

				.price-text {
					font-size: 34rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #333333;
					line-height: 48rpx;
				}
			}
		}
	}
</style>